<template>
	<h1>添加</h1>
	<div class="Box">
		<!-- 左侧表单 -->
		<div class="leftBox">
			<el-form :model="formData" label-position="left" :rules="rules" ref="myForm" :hide-required-asterisk="true">
				<el-form-item label="门店名称" prop="outletName">
					<el-input v-model="formData.outletName" placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="adminName">
					<el-select v-model="formData.adminName" placeholder="请选择负责人">
						<el-option v-for="item in OptionList" :key="item.value" :label="item.adminName" :value="item.adminId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="营业时间:" prop="outletOpenTime">
					<el-time-picker is-range format="HH:mm" value-format="HH:mm" v-model="formData.outletOpenTime"
						range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
					</el-time-picker>
				</el-form-item>
				<el-form-item label="联系方式:" prop="outletPhone">
					<el-input v-model="formData.outletPhone" placeholder="请输入联系方式"></el-input>
				</el-form-item>
				<el-form-item label="门店地址:" prop="outletAddress">
					<el-cascader placeholder="请选择门店地址" v-model="formData.outletAddress" :options="optionAddress"
						@change="ChangeAddress"></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址:" prop="detailAddress">
					<el-input placeholder="请输入详细地址" v-model="formData.detailAddress"></el-input>
				</el-form-item>
				<el-form-item label="备注:" prop="outletDescr">
					<el-input v-model="formData.outletDescr" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<!-- 右侧上传 -->
		<label for style="font-size: 16px">门店logo:</label>
		<el-upload 
			action="http://192.168.16.199:8081/outlets/addLogo"
			:on-change="ImgChange" :on-error="handleError" class="avatar-uploader"
			:before-upload="beforeAvatarUpload" ref="upload">
			<img class="avatar" :src="imgUrl" slot="trigger" v-if="imgUrl">
			<!-- <i slot="trigger" class="el-icon-plus avatar-uploader-icon" v-else></i> -->
			<el-icon class="el-icon-plus avatar-uploader-icon" v-else><Plus/></el-icon>
		</el-upload>
	</div>
	<div class="footer">
		<el-button type="primary" class="sure" @click="confirmAdd(myForm)">确定</el-button>
		<el-button type="info" @click="downPage">取消</el-button>
	</div>
</template>

<script setup lang="ts">
	// 三级联动
	import {codeToText,regionData} from 'element-china-area-data'
	// ref等相关
	import { ref,shallowRef,reactive ,onMounted} from 'vue';
	// 接口
	import {adminList,addBranch} from "../api/wqj/index"
	// el
	import {Plus} from '@element-plus/icons-vue'
	import { ElMessage } from 'element-plus';
	// 路由
	import { useRouter } from 'vue-router';
	let router=useRouter()
	// 表单
	let formData=reactive({
		outletName: "",
		adminName: "",
		outletOpenTime: "",
		outletPhone: "",
		outletAddress: [],
		outletDescr: "",
		detailAddress: "",
	})
	// 验证
	let rules=reactive({
		outletName: [{
			required: true,
			message: '门店名称不能为空',
			trigger: 'blur'
		}],
		adminName: [{
			required: true,
			message: '负责人不能为空',
			trigger: 'change'
		}],
		outletOpenTime: [{
			required: true,
			message: '营业时间不能为空',
			trigger: 'change',
		}],
		outletPhone: [{
			required: true,
			message: '请填写联系方式',
			trigger: 'blur'
		},
		{
			pattern: /^\d{11}$/,
			message: '请输入11位数字',
			trigger: 'blur'
		}],
		outletAddress: [{
			required: true,
			message: '门店地址不能为空',
			trigger: 'change'
		}],
		detailAddress: [{
			required: true,
			message: '详细地址不能为空',
			trigger: 'blur'
		}],
	})
	let OptionList=ref([])//负责人
	let address=[]//三级联动地址
	let optionAddress=regionData
	let image=ref("")
	let imgUrl=ref("")
	let myForm=ref(null)
	// 门店负责人
	const Admin=async()=>{
		let res=await adminList()
		OptionList.value=res.admins
		console.log("负责人",OptionList.value)
	}
	// 三级联动
	const ChangeAddress=(value)=>{
		address=codeToText[formData.outletAddress[0]] + '' + codeToText[formData.outletAddress[
			1]] + '' + codeToText[formData.outletAddress[2]]
	}
	// 图片上传
	//上传失败
	const handleError=(err, file, filelist)=>{
		ElMessage.error('上传失败')
		//console.log(err);
	}
	//上传前
	const beforeAvatarUpload = (rawFile) => {
	  if (rawFile.type !== 'image/jpeg') {
	    ElMessage.error('Avatar picture must be JPG format!')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 2) {
	    ElMessage.error('Avatar picture size can not exceed 2MB!')
	    return false
	  }
	  return true
	}
	const ImgChange=(file, fileList)=>{
		if (file.response != undefined) {
			image.value = file.response.msg
			console.log(image.value)
		}
		imgUrl.value = URL.createObjectURL(file.raw);
		console.log("imgUrl.value",imgUrl.value)
	}
	// 确认添加
	const confirmAdd=(formEL)=>{
		formEL.validate(async(valid)=>{
			if(valid){
				var opentime = formData.outletOpenTime.toLocaleString()
				let res = await addBranch({
					outletLogo:image.value,
					adminId: Number(formData.adminName),
					outletName: formData.outletName,
					outletOpenTime: opentime,
					outletPhone: formData.outletPhone,
					outletAddress: address + formData.detailAddress,
					outletDescr: formData.outletDescr,
				})
				if(res==undefined){
					ElMessage.success('添加成功')
					setTimeout(()=>{
						router.push('/branch')
					},1000)
				}
				console.log("添加",res)
				console.log("outletAddress",formData.outletAddress)
			}
		})
	}
	// 取消
	const downPage=()=>{
		router.push("/branch")
	}
	// 挂载
	onMounted(()=>{
		Admin()
	})
</script>

<style lang="less">
	.avatar-uploader .el-upload {
		border-radius: 10px;
		border: 2px solid #d9d9d9;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 150px;
		height: 150px;
		line-height: 150px;
		text-align: center;
	}
	.avatar {
		width: 150px;
		height: 150px;
		display: block;
	}
		
	.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
	.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
		content: '';
		margin-right: 0;
	}
		
	.el-upload--picture-card {
		border: 2px solid #ccc;
		margin-left: 5px;
		margin-top: 5px;
	}
	.Box {
		margin-left: 50px;
		margin-top: 3%;
		width: 80%;
		display: flex;
		.el-form-item__label {
			font-size: 16px;
			width: 100px;
			color: #333
		}
		.leftBox {
			display: flex;
			width: 50%;
		}
	}
	.el-form-item__content {
		display: flex;
		width: 50%;
	}
	.footer {
		margin-top: 80px;
		width: 50vw;
		.el-button {
			width: 15%;
			height: 45px;
			font-size: 17px;
			border-radius: 6px;
		}
		.el-button:nth-of-type(1) {
			margin-left: 20%;
			color: #fff;
		}
		
		.el-button:nth-of-type(2) {
			margin-left: 40px;
			background: #e8e8e8;
			color: #333;
			border: none
		}
	}
</style>